<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { ThreeApp } from './core/ThreeApp'

let threeApp: ThreeApp | null = null
const threeContainerRef = ref<HTMLElement | null>(null)

onMounted(() => {
  if (threeContainerRef.value) {
    threeApp = new ThreeApp()
    threeContainerRef.value.appendChild(threeApp.getRendererDomElement())
    threeApp.init()
  }
})

onUnmounted(() => {
  threeApp?.dispose()
  if (threeContainerRef.value && threeApp) {
    // Ensure to remove the canvas if it was appended
    const rendererDom = threeApp.getRendererDomElement()
    if (rendererDom && threeContainerRef.value.contains(rendererDom)) {
      threeContainerRef.value.removeChild(rendererDom)
    }
  }
  threeApp = null
})
</script>

<template>
  <div id="app">
    <div id="three-container"
         ref="threeContainerRef"></div>
  </div>
</template>

<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent scrollbars on html/body */
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* Crucial for #app */
}

#three-container {
  width: 100%;
  height: 100%;
  display: block; /* Ensure it behaves as a block */
}

canvas {
  display: block; /* Important for canvas */
  width: 100%;
  height: 100%;
}
</style>
